<template>
  <div class="login-phone">
    <el-form
      reef="phoneFormRef"
      :model="phoneFormModal"
      :rules="rules"
      label-width="70px"
    >
      <el-form-item label="手机" prop="phone">
        <el-input
          v-model="phoneFormModal.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="code-bar">
          <el-input
            v-model="phoneFormModal.code"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            @click="handleCodeBtn"
            :disabled="codeBtnText.indexOf('s') > -1"
            :type="codeBtnText.indexOf('s') > -1 ? 'info' : 'primary'"
            class="code-btn"
            size="small"
          >
            {{ codeBtnText }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElForm } from 'element-plus'
import { useVerifyCode } from '../hooks/useVerifyCode'
export default defineComponent({
  name: 'LoginPhone',
  setup() {
    const phoneFormModal = reactive({
      phone: '',
      code: ''
    })
    const phoneFormRef = ref<InstanceType<typeof ElForm>>()
    const rules = {
      phone: [
        {
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }
      ],
      code: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }
      ]
    }
    const { handleCodeBtn, codeBtnText } = useVerifyCode(phoneFormModal)
    const checkAccount = (isPass: boolean) => {
      phoneFormRef.value?.validate((valid) => {
        if (valid) {
          if (isPass) {
            // 记住密码
          } else {
            // 不记住密码
          }
          console.log('参数正确')
        }
      })
    }
    return {
      phoneFormModal,
      rules,
      handleCodeBtn,
      codeBtnText,
      phoneFormRef,
      checkAccount
    }
  }
})
</script>

<style lang="less" scoped>
.code-bar {
  display: flex;
  align-items: center;
  .code-btn {
    margin-left: 10px;
  }
}
</style>
